<template>
    <view class="twelve-animals" >
      <Start  v-if="defStatus === EnumStatus.STATUS" v-model:content="content" v-model:defStatus="defStatus"  />
      <Result v-else :content="content" v-model:defStatus="defStatus"  />
    </view>
    <Roast />
    <Recommend :top='98'/>
    <ToDY />
  </template>
  
  <script setup lang="ts">
  import { EnumStatus } from "@/utils/constants";
  import Start from "./components/Start.vue";
  import Result from "./components/Result.vue";
  import { EnumBG } from "@/utils/content";

  import Roast from "@/components/Roast/Roast.vue";
  import Recommend from "@/components/Recommend/Recommend.vue";
  import ToDY from "@/components/ToDY/ToDY.vue";

  const defStatus = ref(EnumStatus.STATUS)
  const content = ref()

  </script>
  
  <style>
  page{
    width: 100%;
    height: 100%;
  }
  
  </style>
  
  <style lang="scss" scoped>
  .twelve-animals{
      width: 100%;
      height: 100%;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    .logo-tip{
        position: absolute;
        right: 0;
        bottom: 0; 
        z-index: 10;
        width: 240rpx;
        height: 240rpx;
    }
  }
  
  </style>
  